<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>js+css3</title>
</head>
<style type="text/css">
    .clipzone
    {
        position:relative;
        width:400px;
        height:400px;
        overflow:hidden;
    }
    .clipped
    {
        position:absolute;
    }
</style>
<body>
<div class="header-img">
<span id="uploadImg"><!-- 自定义头像上传 -->
</span>
    <input accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp" type="file" style="display:none;" id="uploadImgInput">
    <img id="myimg" src="${ctx }/resource/wo/img/man_1.png">
</div>

<script src="./img/res/js/jquery-1.11.1.min.js"></script>
<script src="./img/res/js/jquery-1.11.1.min.js"></script>
<script>
    //头像上传
    $("#uploadImg").on('click',function(){
//input file的change事件只能触发一次，因此每次点击头像后都将原input绑定的事件解除，重新赋值并绑定。
        $("#uploadImgInput").off('change');
        $('#uploadImgInput').val('');
        $("#uploadImgInput").on('change',uploadImgInputChangeHandler);
        $("#uploadImgInput").click();//手动触发input点击事件
    });
    //头像上传点击事件触发方法
    function uploadImgInputChangeHandler(){
        var input = this;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(input.files[0]); //获取选中的第一个图片文件
//获取照片方向角属性，也可用于用户旋转控制
            EXIF.getData(input.files[0], function() {
// alert(EXIF.pretty(this));
                EXIF.getAllTags(this);
//alert("Orientation:"+EXIF.getTag(this, 'Orientation'));
                pageData.Orientation = EXIF.getTag(this, 'Orientation'); //将方向信息存入对象中
//return;
            });
            reader.onload = function (e) {
                $("#displayImgDiv").show();
                $("#popupContent").hide();
                $('#displayImg').attr('src', e.target.result);
                $('#displayImg')[0].onload = function(){
//调用Jcrop进行图像截取，具体参数配置可查看相关教程
                    $('#displayImg').Jcrop( {
                            allowSelect: true,
                            allowMove: true,
                            allowResize: true,
                            setSelect: [ 10, 10, screenWidth-10, screenWidth-10],
                            aspectRatio: 1 ,
                            minSize: [200, 200 ],
                            maxSize: [screenWidth, screenWidth ],
                            dragEdges: true,
                            onSelect: updateCoords,//截取框每次移动后的调用的方法
                            trackDocument: false
                        } ,function(){
                            pageData.jcropApi = this;//将jcrop对象存入全局变量中，以便后续获取
                        }
                    );
                }
            }
        }
    }

    //jcrop选框选择后处理事件
    function updateCoords(c){
        var img = document.getElementById("displayImg");
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext("2d");
        var imgW_ori = eval(img.width);//无视方向后的img标签中图片的原始方向角度的宽
        var imgH_ori = eval(img.height);//无视方向后的img标签中图片的原始方向角度的高
        var imgW_css = $(img).width();
        var imgH_css = $(img).height();
//修复手机图像方向问题
//1、坐标确定：由于img标签在浏览器中会根据Orientation属性自动调整展示方向
//故修复方向实际上则是根据当前图像截取框与伪修复图像整体的位置，判断应该截取得区域于真实图片中的位置关系后，
//对相关数据进行处理，canvas的drawImage一共有9个传参，其中需要根据方向调整的有4个：
        var sx,sy,sw,sh,wRatio,hRatio,tx,ty,degree;
        var Orientation = eval(pageData.Orientation);
        if(Orientation != 1 && typeof(Orientation)!="undefined" && Orientation != "" ){
//如果方向角不为1，都需要进行旋转
            switch(Orientation){
                case 6://需要顺时针（向左）90度旋转
//对于图片缩放过后，需获取图片实际缩放比例
                    wRatio = imgW_ori/imgH_css;
                    hRatio = imgH_ori/imgW_css;
//alert(imgW_ori+","+imgH_ori+","+imgW_css+","+imgH_css);
                    sx = c.y*wRatio;
                    sy = (imgW_css-c.x-c.w)*hRatio;
                    sw = c.h*wRatio;
                    sh = c.w*hRatio;
                    degree = 90 * Math.PI / 180;
                    tx = 0;
                    ty = -200;
                    /* tx = 0;
                    ty = -imgH_ori;
                    canvas.width = imgH_ori;
                    canvas.height = imgW_ori; */
                    break;
                case 8://需要逆时针（向右）90度旋转
                    wRatio = imgW_ori/imgH_css;
                    hRatio = imgH_ori/imgW_css;
                    sx = (imgH_css-c.y-c.h)*wRatio;
                    sy = c.x*hRatio;
                    sw = c.h*wRatio;
                    sh = c.w*hRatio;
                    degree = 3 * 90 * Math.PI / 180;
                    tx = -200;
                    ty = 0;
                    /* tx = -imgW_ori;
                    ty = 0;
                    canvas.width = imgH_ori;
                    canvas.height = imgW_ori; */
                    break;
                case 3://需要180度旋转
                    wRatio = imgW_ori/imgW_css;
                    hRatio = imgH_ori/imgH_css;
                    sx = (imgW_css-c.x-c.w)*wRatio;
                    sy = (imgH_css-c.y-c.h)*hRatio;
                    sw = c.w*wRatio;
                    sh = c.h*hRatio;
                    degree = Math.PI;
                    tx = -200;
                    ty = -200;
                    /*tx = -imgW_ori;
                    ty = -imgH_ori;
                    canvas.width = imgW_ori;
                    canvas.height = imgH_ori; */
                    break;
            }
        }else{
            wRatio = imgW_ori/imgW_css;
            hRatio = imgH_ori/imgH_css;
            sx = c.x*wRatio;
            sy = c.y*hRatio;
            sw = c.w*wRatio;
            sh = c.h*hRatio;
            tx = 0;
            ty = 0;
        }
        var tempImage = new Image();//新建一个image对象，用于存放不带exif信息的图像数据，新建image的原因是若直接使用原来的image对象，会有图片展示区域与真实区域错位不一致从而导致无法获取正确的图像源数据
        tempImage.src = img.src;
        tempImage.onload = function(){//确保图像加载完毕后再进行下一步，不然可能会导致获取不到图片宽高
//将canvas画布的大小设为200x200大小并裁剪成圆形作为头像
            canvas.width = 200;
            canvas.height = 200;
            ctx.arc(100, 100, 100, 0 ,2*Math.PI);
            ctx.clip();
//alert("Orientation:"+Orientation+","+sx+","+sy+","+sw+","+sh+","+tx+","+ty+","+degree);
            ctx.drawImage(tempImage, sx, sy, sw, sh, 0, 0, 200, 200); //在canvas中将裁剪后图片重新画出来
//ctx.drawImage(img, 0, 0, 3024, 4032, 0, 0, 200, 200);
            var base64 = canvas.toDataURL('image/jpeg',0.5);
//window.open(base64);
//2、接下来进行旋转
            var resultImg = new Image();//新建一个image对象，用于存放截图后的数据
            resultImg.src = base64;
            resultImg.onload = function(){
                if(degree){
                    ctx.rotate(degree);//对方向进行修正
                }
                ctx.drawImage(resultImg, tx, ty);
                pageData.base64 = canvas.toDataURL('image/jpeg');//将base64码存入全局变量中
//window.open(pageData.base64);
            }
        }
    }
</script>
</body>
</html>

